﻿@{
    Layout = null;
    ViewData["Title"] = "IndexUpdate";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬标准变更</h1>
<div id="app">
    @*开始查询的表单*@
    <div v-if="findhid==1">
        <el-form ref="SalaryStandardDimPage" :model="SalaryStandardDimPage" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-form-item label="薪酬标准编号">
                        <el-input v-model="SalaryStandardDimPage.standard_id" placeholder="请输入薪酬标准编号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-form-item label="关键字">
                        <el-input v-model="SalaryStandardDimPage.key_word" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="建档时间">
                        <el-date-picker v-model="SalaryStandardDimPage.find_time"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" v-on:click="handleFind()">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
    @*查询的结果表格*@
    <div v-if="findhid==2">
        @*操作按钮*@
        <el-row :gutter="20">
            <el-col :span="3" :offset="21">
                <el-button type="warning" v-on:click="handleFanhui1" style="margin-left: 20px;">返回</el-button>
            </el-col>
        </el-row>
        @*美观，上下隔断一点间距*@
        <div style="margin: 25px 0;"></div>
        <el-table :data="salary_standards"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="standard_id" label="薪酬标准编号" width="170">
            </el-table-column>
            <el-table-column prop="standard_name" label="薪酬标准名称" width="170">
            </el-table-column>
            <el-table-column prop="designer" label="制定人" width="170">
            </el-table-column>
            <el-table-column prop="regist_time" label="登记时间" width="170" :formatter="datetimeFiltr">
            </el-table-column>
            <el-table-column prop="salary_sum" label="薪酬总额" width="170">
            </el-table-column>
            <el-table-column prop="salary_sum" label="操作" width="170">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle v-on:click="handleEdit(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*选择变更的表单*@
    <div v-if="findhid==3">
        @*操作按钮*@
        <el-row :gutter="20">
            <el-col :span="6" :offset="17">
                <el-button type="primary" v-on:click="handleUdpSubmit('salary_standard')">变更通过</el-button>
                <el-button type="warning" v-on:click="handleFanhui2" style="margin-left: 20px;">返回</el-button>
            </el-col>
        </el-row>
        @*美观，上下隔断一点间距*@
        <div style="margin: 25px 0;"></div>
        <el-form ref="salary_standard" :rules="rules" :model="salary_standard" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="薪酬标准编号">
                        <el-input v-model="salary_standard.standard_id" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="薪酬标准名称" prop="standard_name">
                        <el-input v-model="salary_standard.standard_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="薪酬总额">
                        <el-input v-model="salary_standard.salary_sum" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="制定人" prop="designer">
                        <el-select v-model="salary_standard.designer" placeholder="请选择制定人">
                            <el-option v-for="item in optUsers"
                                       :key="item.u_id"
                                       :label="item.u_name"
                                       :value="item.u_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="变更人" prop="changer">
                        <el-select v-model="salary_standard.changer" placeholder="请选择变更人人">
                            <el-option v-for="item in optUsers"
                                       :key="item.u_id"
                                       :label="item.u_name"
                                       :value="item.u_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="变更时间">
                        <el-date-picker v-model="salary_standard.change_time"
                                        type="datetime"
                                        placeholder="选择日期时间" :disabled="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea"
                                  :autosize="{ minRows: 4, maxRows: 6}"
                                  placeholder="请输入复核意见"
                                  v-model="salary_standard.remark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        @*详细薪酬信息表格*@
        <el-table :data="salary_standard_details"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="sdt_id"
                             label="序号"
                             width="300">
            </el-table-column>
            <el-table-column prop="item_name"
                             label="薪酬项目名称"
                             width="360">
            </el-table-column>
            <el-table-column prop="salary"
                             label="金额"
                             width="360">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.salary" v-on:change="intputNumChange" :precision="2" :min="0" :max="10000" controls-position="right"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>


<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            //薪酬标准基本信息表
            SalaryStandardDimPage: {
                ssd_id: '',//主键，自动增长列
                standard_id: '',//薪酬标准单编号
                key_word: '',
                find_time: '',
            },
            //下拉列表框用户集合的数据源
            optUsers:[],
            //薪酬表单数据源集合
            salary_standards: [],
            //薪酬标准基本信息表
            salary_standard: {
                ssd_id: '',//主键，自动增长列
                standard_id: '',//薪酬标准单编号
                standard_name: '',//薪酬标准单名称
                designer: '',// 制定人
                register: '',//登记人
                checker: '',//复核人
                changer: '',//变更人
                regist_time: '',//登记时间
                check_time: '',//复核时间
                change_time: '',//变更时间
                salary_sum: 0,//薪酬总额
                check_status: '',//是否经过复核
                change_status: '',//更改状态
                check_comment: '',//复核意见
                remark: '',//备注
            },
            //薪酬详细信息数据源
            salary_standard_details: [],
            //表单提交验证规则
            rules: {
                //薪酬标准单名称
                standard_name: [
                    { required: true, message: "请填写薪酬标准单名称！", trigger: 'blur' }
                ],
                //制定人
                designer: [
                    { required: true, message: "请填写制定人！", trigger: 'blur' }
                ],
                //变更人
                changer: [
                    { required: true, message: "请填写变更人！", trigger: 'blur' }
                ],
                //备注
                remark: [
                    { required: true, message: "请填写变更后的备注！", trigger: 'blur' }
                ],
            },
            //表单显示标记，默认先显示模糊查询表单,ps:模糊查询=1，查询表格=2，变更表单=3
            findhid: 1,
            pgsize: 3,
            pgcurrent: 1,
            rows: 0,
        },
        methods: {
            //模糊查询按钮的点击事件
            handleFind() {
                //console.info("salary_standard.open_time:", this.SalaryStandardDimPage.find_time);
                if (this.SalaryStandardDimPage.find_time == null) {
                    //若点击了叉叉按钮清空了时间控件值，则需要赋空操作，倘若为null会有bug，无法获取数组里的值进行提交
                    this.SalaryStandardDimPage.find_time = '';
                };
                //模糊查询方法
                this.fillDim();
            },
            fillDim() {
                axios.post("/SalaryStandard/SalaryStandardDimFind", {
                    standard_id: this.SalaryStandardDimPage.standard_id,
                    key_word: this.SalaryStandardDimPage.key_word,
                    open_time: this.SalaryStandardDimPage.find_time[0],
                    close_time: this.SalaryStandardDimPage.find_time[1],
                    pgsize: this.pgsize,
                    pgcurrent: this.pgcurrent,
                    uqFlag: 0,
                }).then((res) => {
                    if (res.data.tabs != null) {
                        //console.info(res.data);
                        //赋值给分页和表单数据源
                        this.salary_standards = res.data.tabs;
                        this.rows = res.data.rows;
                        //打开表单
                        this.findhid = 2;
                    } else {
                        this.salary_standards = [];
                    }
                })
            },

            //收起表单按钮
            handleHidden() {
                this.findhid = 1;
            },
            //时间过滤器
            datetimeFiltr(row, column) {
                let data = row[column.property]
                let dt = new Date(data)
                return dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() + "日"
            },
            //变更编辑按钮的点击事件
            handleEdit(row) {
                //显示单行编辑的变更表单
                this.findhid = 3;
                //给表格赋值
                this.salary_standard = row;
                //获取到当前登录用户，赋值为复核人
                this.salary_standard.changer = sessionStorage.getItem("userName");
                //请求查询该条薪酬下的详细薪酬信息
                axios.get("/SalaryStandard/SalaryStandardDetailBySid?standard_id=" + row.standard_id).then((res) => {
                    this.salary_standard_details = res.data;
                })
            },
            //获取当前时间
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //获取年
                var month = now.getMonth();//获取月
                var date = now.getDate();//获取日
                var hours = now.getHours();//获取小时
                var minutes = now.getMinutes();//获取分钟
                var seconds = now.getSeconds();//获取秒
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
                this.salary_standard.change_time = new Date();
            },
            findUsers() {
                //查询下拉列表框中的所有用户信息
                axios.get("/SalaryStandard/FindUsers").then((res) => {
                    console.info("optUsers:", res.data);
                    //公共字段里所有薪资组成集合
                    this.optUsers = res.data;

                })
            },
            //定义时间戳
            created() {
                setInterval(() => {
                    this.getNowTime();
                }, 500);
            },
            //提交变更按钮的点击
            handleUdpSubmit(ruleForm) {
                var strjson = JSON.stringify(this.salary_standard_details);
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        axios.all([axios.post('/SalaryStandard/SalaryStandardUdp', {
                            ssd_id: this.salary_standard.ssd_id,
                            standard_name: this.salary_standard.standard_name,
                            designer: this.salary_standard.designer,
                            changer: this.salary_standard.changer,
                            change_time: this.salary_standard.change_time,
                            salary_sum: this.salary_standard.salary_sum,
                            change_status: 1,
                            remark: this.salary_standard.remark,
                        }), axios.get('/SalaryStandard/SalaryStandardDetailUdp?strjson=' + strjson)])
                            .then(axios.spread((ssres, ssdres) => {
                                if (ssres.data >= 0 && ssdres.data >= 0) {
                                    //变更成功弹框
                                    this.openSucc();
                                    //再根据之前的模糊查询方法进行刷新一下
                                    this.fillDim();
                                    //返回上一级菜单
                                    this.findhid = 2;
                                }
                            }))
                    } else {
                        this.openWarn();
                    }
                })
            },
            //计数器文本框值改变事件
            intputNumChange() {
                //先进行置空操作
                this.salary_standard.salary_sum = 0;
                //拿到薪酬详情的所有集合，遍历将值累加，生成修改总额
                for (var i = 0; i <= this.salary_standard_details.length; i++) {
                    this.salary_standard.salary_sum += this.salary_standard_details[i].salary;
                }
            },
            //第二部分的返回按钮事件
            handleFanhui1() {
                //打开上级的表格展示
                this.findhid = 1;
            },
            //第三部分的返回按钮事件
            handleFanhui2() {
                //打开上级的表格展示
                this.findhid = 2;
            },
            //成功消息提示框
            openSucc() {
                this.$message({
                    message: '薪酬标准变更完成！',
                    type: 'success'
                });
            },
            //验证未通过提示框
            openWarn() {
                this.$notify({
                    title: '警告',
                    message: '请完善信息后再进行变更！',
                    type: 'warning'
                });
            },
            //页面容量改变事件
            handleSizeChange(val) {
                this.pgsize = val;
                this.handleFind();
            },
            //页面下标改变事件
            handleCurrentChange(val) {
                this.pgcurrent = val;
                this.handleFind();
            },
        },
        mounted: function() {
            this.findUsers();
            this.created();
        }

    })


</script>
